<template>
    <div>
      <div class="btns">
        <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>  
      </div>
      <div class="table_control">

        <!-- 表单 -->
        <el-table
        :data="article"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="文章编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="title"
          label="文章标题"
          width="180">
        </el-table-column>
        <el-table-column
          prop="brief"
          label="文章简要"
          width="180">
        </el-table-column>
        <el-table-column
          prop="publishTime"
          label="上传时间"
          width="180">
          <template slot-scope="scope">
              {{scope.row.publishTime | fmtDate}}
          </template>
        </el-table-column>
        <el-table-column
          prop="readTimes"
          label="阅读次数">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
        </el-table-column>
        <!-- <el-table-column
          prop="cover"
          label="原文链接">
        </el-table-column> -->
        <el-table-column
          prop="authorId"
          label="作者编号">
        </el-table-column>
        <el-table-column
          prop="categoryId"
          label="创建编号">
        </el-table-column>


        <!-- 操作列 -->
        <el-table-column width="100" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
            <el-dropdown>
              <span class="el-dropdown-link">审核<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <div @click="ok(scope.row)">
                  <el-dropdown-item >通过</el-dropdown-item>
                </div>
                <div @click="no(scope.row)">
                  <el-dropdown-item>不通过</el-dropdown-item>
                </div>
              </el-dropdown-menu>
          </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { get ,post,del} from '@/utils/request'

export default {
  // 定义变量，在模板中直接用用
  data(){
    return {
      article:[],
      visible:false
    }
  },
  // 定义事件处理函数、方法
  methods:{

  //审核通过方法
  ok(row){
      row.status="审核通过"
      // console.log(this.row)
      let url = "http://localhost:8888/Article/saveOrUpdate" 
      post(url,row).then(resp =>{
      // console.log(resp);
      // 提示
      this.$message({type:"success",message:resp.message})
      //刷新
      this.LoadArticle();
    })
  },
  //审核不通过方法
  no(row){
    row.status="审核不通过"
    console.log(row)
    let url = "http://localhost:8888/Article/saveOrUpdate"
      post(url,row).then(resp =>{
      // console.log(resp);
      // 提示
      this.$message({type:"success",message:resp.message})
      //刷新
      this.LoadArticle();
    })
  },

 // 删除的处理函数
    deleteHandler(row){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "http://localhost:8888/Article/deleteById"

        del(url,{id:row.id}).then(resp =>{
          // console.log(resp);
          // 1. 提示
          this.$message({type:"success",message:resp.message});
          // 2. 刷新
          this.LoadArticle();
        })
      })
    },
    // 修改的处理函数
    editHandler(row){
      console.log(row)
      this.$router.push({ 
        path:"/hyz/articleform" ,
        query:row
      })
    },
    // 查询所有的用户的数据
    LoadArticle(){
      let url = "http://localhost:8888/Article/query"
      get(url).then(resp => {
        // 获取数据之后做的事情
        // console.log(resp);
        this.article = resp.data;
      })
    },
    //新增跳转
    toFormHandler(){

      this.$router.push({ path:"/hyz/articleform" })
    }
  },
  // 生命周期钩子函数
  created(){
    this.LoadArticle();
  }

}
</script>

<style lang="sass" scoped>

</style>